<template>
  <el-card shadow="hover">
    <div class="header">
      <el-tabs v-model="activeTabName" @tab-change="handleTabChange">
        <!-- 
          label 代表标题
          name 选中的值
          默认插槽 显示的内容
         -->
        <el-tab-pane label="销售额" name="sales"></el-tab-pane>
        <el-tab-pane label="访问量" name="visited"></el-tab-pane>
      </el-tabs>

      <div class="header-right">
        <el-radio-group
          class="mr-10"
          v-model="selectedDate"
          @change="handleRadioChange"
        >
          <el-radio-button label="day">今日</el-radio-button>
          <el-radio-button label="week">本周</el-radio-button>
          <el-radio-button label="month">本月</el-radio-button>
          <el-radio-button label="year">今年</el-radio-button>
        </el-radio-group>

        <!-- 
          unlink-panels 在范围选择器里取消两个日期面板之间的联动
         -->
        <el-date-picker
          v-model="date"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </div>
    </div>

    <el-row :gutter="20">
      <el-col :xs="24" :sm="17">
        <Chart height="300px" :option="chartOption" />
      </el-col>
      <el-col :xs="24" :sm="7">
        <h3 class="shop-title">
          {{ activeTabName === "sales" ? "门店销售额排行" : "门店访问量排行" }}
        </h3>
        <ul class="shop-list">
          <li
            v-for="(rankItem, index) in activeTabName === 'sales'
              ? data.orderRank
              : data.userRank"
            :key="rankItem.no"
            :class="{
              'shop-item': true,
              active: index < 3,
            }"
          >
            <div>
              <span class="shop-index">{{ rankItem.no }}</span>
              <span>{{ rankItem.name }}</span>
            </div>
            <span>{{ rankItem.count }}</span>
          </li>
        </ul>
      </el-col>
    </el-row>
  </el-card>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import dayjs from "dayjs";
import type { ECOption } from "@/utils/echarts";
import type { TabPanelName, DateModelType } from "element-plus";

defineOptions({
  name: "SalesVisited",
});

const props = defineProps<{
  data: any;
}>();

const activeTabName = ref("sales");

const today = dayjs().format("YYYY-MM-DD");
const date = ref<[DateModelType, DateModelType]>([today, today]);

const handleRadioChange = (val: any) => {
  // if (val === "day") {
  //   const today = dayjs().format("YYYY-MM-DD");
  //   date.value = [today, today];
  // } else if (val === "week") {
  //   const startDate = dayjs().startOf("week").format("YYYY-MM-DD");
  //   const endDate = dayjs().endOf("week").format("YYYY-MM-DD");
  //   date.value = [startDate, endDate];
  // } else if (val === "month") {
  //   const startDate = dayjs().startOf("month").format("YYYY-MM-DD");
  //   const endDate = dayjs().endOf("month").format("YYYY-MM-DD");
  //   date.value = [startDate, endDate];
  // } else {
  //   const startDate = dayjs().startOf("year").format("YYYY-MM-DD");
  //   const endDate = dayjs().endOf("year").format("YYYY-MM-DD");
  //   date.value = [startDate, endDate];
  // }

  if (val === "day") {
    const today = dayjs().format("YYYY-MM-DD");
    date.value = [today, today];
  } else if (val === "week") {
    const startDate = dayjs()
      .startOf("week")
      .add(1, "day")
      .format("YYYY-MM-DD");
    const endDate = dayjs().endOf("week").add(1, "day").format("YYYY-MM-DD");
    date.value = [startDate, endDate];
  } else {
    const startDate = dayjs().startOf(val).format("YYYY-MM-DD");
    const endDate = dayjs().endOf(val).format("YYYY-MM-DD");
    date.value = [startDate, endDate];
  }
};

const selectedDate = ref("day");

const chartOption = ref<ECOption>({
  title: {
    text: "销售趋势",
    textStyle: {
      fontSize: 14,
    },
  },
  xAxis: {
    data: [],
  },
  yAxis: {},
  series: {
    type: "bar",
    data: [],
    barWidth: 20,
  },
  grid: {
    left: 10,
    right: 10,
    bottom: 10,
    containLabel: true,
  },
  tooltip: {},
});

watch(props, (props) => {
  (chartOption.value.xAxis as any).data = props.data.orderFullYearAxis;
  (chartOption.value.series as any).data = props.data.orderFullYear;
});

const handleTabChange = (activeTab: TabPanelName) => {
  (chartOption.value.title as any).text =
    activeTab === "sales" ? "销售额" : "访问量";
  (chartOption.value.xAxis as any).data =
    activeTab === "sales"
      ? props.data.orderFullYearAxis
      : props.data.userFullYearAxis;
  (chartOption.value.series as any).data =
    activeTab === "sales" ? props.data.orderFullYear : props.data.userFullYear;
};
</script>

<style scoped lang="scss">
.header {
  position: relative;
}

.header-right {
  position: absolute;
  right: 0;
  top: 0;
  height: 60px;
  display: flex;
  align-items: center;
}

:deep() {
  .el-card__body {
    padding-top: 0;
  }

  .el-tabs__item {
    width: 80px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    padding: 0;
    &:hover {
      background-color: var(--el-color-primary-light-9);
    }
  }
}

.shop-title {
  font-size: 14px;
  font-weight: 400;
}
.shop-list {
  padding: 0;
  font-size: 13px;
}
.shop-item {
  display: flex;
  height: 20px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;

  &.active .shop-index {
    background-color: #000;
    color: #fff;
  }

  div {
    display: flex;
  }
}
.shop-index {
  margin-right: 20px;
  display: flex;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
}
</style>
